<template>
  <div>
    <Searchbar>
<!--      <p class="page-title">实验管理 > 镜像管理</p>-->
      <div class="tabs">
          <div  @click="go('/pub/images')">内置镜像</div>
          <div class="active-tab">自定义镜像</div>
          <div @click="go('/my/instances')">虚拟机列表</div>
      </div>
      <div>
        <el-input style="margin-top: 10px;margin-right: 10px" @change="getList" class="long-input" v-model="search.image_name" placeholder="请输入镜像名称"></el-input>
        <el-button  @click="getList" type="primary">查询</el-button>
      </div>
    </Searchbar>
    <table cellspacing="0" cellpadding="0" class="obj-con-table">
      <thead>
        <tr>
          <td>序号</td>
          <td>镜像名称</td>
          <td>操作系统</td>
          <td>状态</td>
<!--          <td>备注</td>-->
          <td>创建时间</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(c, i) in tableData" :key="'course' + i">
          <td>{{i+1}}</td>
          <td>{{c.image_name}}</td>
          <td>{{c.opration_system}}</td>
          <td>{{c.status=='N'?"Normal":c.status=='S'?"Shutdown":"Cancel"}}</td>
<!--          <td>{{c.note}}</td>-->
          <td>{{c.create_time}}</td>
          <td>
            <el-button @click="delImage(c)" type="warning">回收</el-button>
            <el-button @click="copyImage(c)" type="primary">复制</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
    <copy-image :show="show" @onSubmit="handleSubmit" @onClose="handleReset"  />
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { imageModel } from "../api/models";
import Searchbar from "@/components/Searchbar";
import openStatus from '@/common/is_open_status.js'
import tabMixin from '@/mixins/tabMixin.js'
import goMixin from '@/mixins/goMixin.js'
import CopyImage from '../modals/CopyImage.vue';
import CopyImageMixin from '@/mixins/CopyImageMixin.js'
import { WConfirm } from '../utils/utils';
import {Message} from 'element-ui';
export default {
  mixins: [pageMixin, tabMixin, goMixin, CopyImageMixin],
  components: { Searchbar, CopyImage},
  data() {
    return {
      tableData: [],
      total: 0,
      is_open_status: openStatus.status,
      search: {
        image_name: null,
        page: 1,
        page_size: 10,
        get_public: 0
      },
      instances: [],
      loading: false
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      imageModel.list(
        this.search,
        res => {
          this.total = res.total_records;
          this.tableData = res.data.map(v => {
            v.isOpenStat = v.is_open == 1 ? '是' : '否'
            return v;
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    delImage(c) {
      if (this.loading) return
      WConfirm('确定删除镜像' + c.image_name, () => {
        this.loading = true
        imageModel.delMyImage({
          id: c.id
        }, res => {
          // Message.success(res.message)
          Message.success("镜像删除成功")
          this.loading = false
          this.getList()
        }, err => {
          Message.error(err.message)
          this.loading = false
        })
      })
    }
  }
};
</script>
<style lang="scss">
</style>